<template>
   <div class="tabs-box">
      <div class="config-tabs">
        <div ref='tabs' v-for="(item, index) in tabPane" :key="index" :class="{'tab-pane': true, active: active===index}" @click="toggle(index, item)">
          {{item.label || item.name}}
        </div>
        <div class="tabs__active-bar" :style="getBarStyle()"></div>
      </div>
      <div class="oprate">
        <div v-for="(item, index) of oprateArray" :key='index'>
          <span @click="actionClick(item.action)" ><i :class="[{ V7_iconfont: true }, item.icon ? item.icon: '', item.type ? item.type: '',]"></i>{{item.prop}}</span>
        </div>
      </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'

@Component({ name: 'config-tabs' })
export default class ConfigTabs extends Vue {
  @Prop(Array) private tabPane!: []
  @Prop(Boolean) private isBusiness!: []
  @Prop(String) private value!: []
  @Prop(Array) private oprateArr!: []

  // 操作按钮
  private oprateArray: any = []
  private active = -1
  private toggle (i, t) {
    if (this.active !== i) {
      this.active = i
      this.$set(this, 'oprateArray', [])
    }
    // @ts-ignore
    this.$addZhuGeTrack(t._id)
    this.$emit('tab-click', t)
    if (this.isBusiness) {
      this.$emit('input', t.type)
    } else {
      this.$emit('input', t.name)
    }
  }

  private mounted () {
    this.getPaneIndex()
  }

  private getPaneIndex () {
    const active = this.tabPane.findIndex(({ name }) => {
      return name === this.value
    })
    this.active = active > -1 ? active : 0
  }

  private getBarStyle () {
    const style: any = {}
    let offset = 0
    let tabSize = 0
    const sizeDir = 'x'
    const sizeName = 'width'
    const firstUpperCase = str => {
      return str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase())
    }
    this.tabPane.every((tab, index) => {
      const tabs: any = this.$refs.tabs || []
      const $el = tabs.length > 0 ? tabs[index] : {}
      if (tabs.length <= 0) {
        return false
      }
      if (index !== this.active) {
        offset += $el[`client${firstUpperCase(sizeName)}`]
        return true
      } else {
        tabSize = $el[`client${firstUpperCase(sizeName)}`]
        const tabStyles = window.getComputedStyle($el)
        if (sizeName === 'width' && this.tabPane.length > 0) {
          tabSize -= parseFloat(tabStyles.paddingLeft) + parseFloat(tabStyles.paddingRight)
        }
        if (sizeName === 'width') {
          offset += parseFloat(tabStyles.paddingLeft)
        }
        return false
      }
    })
    const transform = `translate${firstUpperCase(sizeDir)}(${offset + tabSize / 4}px)`
    style[sizeName] = tabSize / 2 + 'px'
    style.transform = transform
    style.msTransform = transform
    style.webkitTransform = transform
    return style
  }

  private actionClick (action) {
    this.$emit('actionClick', action)
  }

  @Watch('oprateArr')
  private oprateArrChange (newArr) {
    this.oprateArray = newArr
  }
}
</script>

<style lang="stylus" scoped>
  $oprate-default-font-size = 14px
  $oprate-default-mini-size = 12px
  .tabs-box
    margin-bottom 14px
    display flex
    flex-direction row
    justify-content space-between
  .config-tabs
    white-space nowrap
    position relative
    transition transform .3s
    z-index 2
    cursor pointer
    .tab-pane
      padding 0 10px
      box-sizing border-box
      display inline-block
      list-style none
      font-size 14px
      font-weight 500
      color $fc-gray2
      position relative
      height 25px
    .active
      font-weight bold
      color $fc-gray
    .tabs__active-bar
      position absolute
      bottom 0
      left 0
      height 3px
      background-color #409EFF
      z-index 1
      transition transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)
      list-style none
  .oprate
    display flex
    flex-direction row
    align-items center
    > div
     margin-right 15px
     font-size $oprate-default-font-size
     cursor pointer
     i
      padding 3px
      box-sizing border-box
      background red
      margin-right 3px
      border-radius 3px
      font-size $oprate-default-mini-size
      color white
    .add
      background $hover-blue
    .export
      background $c-green
</style>
